<template>
    <div class="channel-edit">
      <div class="wrap">
        <div class="title" >
          <span>我的频道</span>
          <van-button plain type="danger" size="mini" @click="isEidt = !isEidt ">{{isEidt?'取消':'编辑'}}</van-button>
        </div>
        <van-grid>
          <van-grid-item @click="into(index)" v-for="(item,index) in channelList" :key="item.id">
        <span :class="{active:index === value}">{{ item.name }}</span>
        <van-icon v-show="index != 0&& isEidt" class="close-icon" name="cross" @click="del(item,index)" />
        </van-grid-item>
        </van-grid>
      </div>

      <div class="wrap">
        <div class="title">
          <span>可选频道</span>
        </div>
        <van-grid >
          <van-grid-item  v-for="item in opList" @click="$emit('add',item)" :key="item.id" :text="item.name" />
        </van-grid>
      </div>
    </div>
  </template>
<script>
export default {
  props: {
    channelList: {
      type: Array,
      required: true
    },

    allList: {
      type: Array,
      required: true
    },
    value: {
      required: true,
      type: Number
    }
  },
  data () {
    return {
      isEidt: false
    }
  },
  computed: {
    opList () {
      return this.allList.filter(item => {
        const index = this.channelList.findIndex(v => item.id === v.id)
        return index === -1
      })
    }
  },
  methods: {
    into (index) {
      this.$emit('update:channelshow', false)
      this.$emit('input', index)
    },
    del (item, index) {
      this.$emit('del', item)
      if (index < this.value) {
        this.$emit('input', this.value - 1)
      }
    }
  }

}
</script>

  <style lang="less" scoped>
  .channel-edit {
    .wrap {
      margin-bottom: 10px;
      padding: 20px;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }
    }
    .close-icon{
        position: absolute;
        right:5px;
        top:10px;
    }
  }
  .active{
    color:red
  }
  </style>
